$f: 19.2;

.home {
  position: relative;
  width: 100%;

  .container {
    margin: 163/$f+vw 210/$f+vw;

    .links {
      display: flex;
      align-items: center;

      a {
        color: #666;
        font-size: 16/$f+vw;
      }

      span {
        margin: 0 10/$f+vw;
      }
    }

    .wrap {
      margin: 127/$f+vw 197/$f+vw;

      .t {
        color: #000;
        font-size: 50/$f+vw;
        font-weight: 700;
      }

      .time {
        margin: 11/$f+vw 0 0 0;
        padding-bottom: 20/$f+vw;
        color: #666;
        font-size: 16/$f+vw;
        border-bottom: 1px solid #D3D3D3;
      }

      .html {
        margin: 33/$f+vw 0;
        color: #666;
        font-size: 16/$f+vw;
        line-height: 1.625;
        img{
           max-width: 100%;
        }
      }
    }

    .pager {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid #D3D3D3;
      border-bottom: 1px solid #D3D3D3;
      padding: 31/$f+vw 0;
      .prev,
      .next {
        display: flex;
        align-items: center;

        p {
          color: #666;
          font-size: 16/$f+vw;
        }

        p:last-child {
          margin-left: 30/$f+vw;
        }
      }

      .back {
        display: flex;
        align-items: center;
        width: 162/$f+vw;
        height: 60/$f+vw;
        border-radius: 30/$f+vw;
        background: #666;
        justify-content: center;
        svg{
          width: 25/$f+vw;
          display: block;
        }
        p{
          color: #FFF;
          font-size: 16/$f+vw;
          margin-left: 12/$f+vw;
        }
      }
    }
    .recommend{
      margin-top: 136/$f+vw;
      .t{
        font-size: 50/$f+vw;
        font-weight: 700;
        margin-bottom: 35/$f+vw;
      }
      .news{
        .swiper{
          width: 100%;
          .item{
            display: block;
            position: relative;
            padding-bottom:140/$f+vw;
            .pic{
              overflow: hidden;
              img{
                width: 100%;
                display: block;
                object-fit: cover;
                transition: all 600ms;
              }
            }
            .info {
              position: absolute;
              left: 10%;
              width: 80%;
              bottom: 30/$f+vw;
              border-radius: 3px;
              background: #FFF;
              box-shadow: 0px 0px 30/$f+vw 0px rgba(0, 0, 0, 0.25);
              padding: 34/$f+vw 30/$f+vw;
  
              &::after {
                content: '';
                height: 6/$f+vw;
                width: 0;
                border-radius: 3px;
                background: #00B58A;
                position: absolute;
                left: 0;
                bottom: 0;
                transition: all 600ms;
              }
  
              .name {
                color: #000;
                font-size: 18/$f+vw;
              }
  
              .tag {
                color: #666;
                font-size: 16/$f+vw;
                margin-top: 13/$f+vw;
              }
            }
            &:hover{
              .pic{
                img{
                  transform: scale(1.05);
                }
              }
              .info{
                &::after{
                  width: 100%;
                }
              }
            }
          }
        }
      }
    }
  }


  @media screen and (max-width: 1024px) {
    padding-top: 60px;
    .container{
      margin: 20px 5%;
      .links{
        a,span{
          font-size: 16px;
        }
        span{
          margin: 0 5px;
        }
      }
      .wrap{
        margin: 30px 0;
        .t{
          font-size: 18px;
        }
        .time{
          margin: 15px 0 0 0;
          font-size: 16px;
          padding-bottom: 15px;
        }
        .html{
          margin: 20px 0;
          font-size: 16px;
        }
      }
      .pager{
        padding: 20px 0;
        flex-direction: column;
        .prev,.next{
          p{
            font-size: 14px;
          }
        }
        .back{
          width: 120px;
          height: 40px;
          border-radius: 15px;
          margin: 15px 0;
          svg{
            width: 20px;
          }
          p{
            font-size: 14px;
            margin-left: 10px;
          }
        }
      }
      .recommend{
        margin-top: 20px;
        .t{
          font-size:18px;
          margin-bottom: 10px;
        }
        .news{
          .swiper{
            .item{
               .info{
                padding: 20px;
                &::after{
                  height: 3px;
                }
                .name{
                   font-size: 18px;
                }
                .tag{
                  font-size: 16px;
                  margin-top: 10px;
                }
               }
            }
          }
        }
      }
    }
  }
}